<!--
 * @Author: 李昊
 * @Date: 2021-06-16 16:07:42
 * @LastEditTime: 2022-05-15 18:24:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \lix-vue2-demos\src\views\demo\animation\Animation.vue
-->
<template>
  <div style="display: flex; flex-wrap: wrap">
    <!-- 正反旋转 -->
    <Rotate1></Rotate1>

    <!-- 两面旋转 -->
    <Rotate2></Rotate2>

    <!-- 旋转木马 -->
    <Rotate3></Rotate3>

    <!-- 方块动画 -->
    <Move></Move>

    <!-- 热点效果 -->
    <HotDot></HotDot>

    <!-- 奔跑的熊 -->
    <BearRun></BearRun>

    <!-- 3d -->
    <TransformPanel></TransformPanel>
  </div>
</template>

<script>
import Rotate1 from './modules/rotate/Rotate1.vue'
import Rotate2 from './modules/rotate/Rotate2.vue'
import Move from './modules/Move.vue'
import HotDot from './modules/HotDot.vue'
import Rotate3 from './modules/rotate/Rotate3.vue'
import BearRun from './modules/BearRun.vue'
import TransformPanel from './modules/TransformPanel.vue'
export default {
  name: 'animation',
  components: {
    Rotate1,
    Rotate2,
    Move,
    HotDot,
    Rotate3,
    BearRun,
    TransformPanel
  }
}
</script>
<style lang="less" scoped>
// animation: name duration timing-function delay iteration-count direction fill-mode play-state;
.el-card {
  margin: 0 10px 10px 0;
}
</style>
